<template>
  <div>
    <div>
      <van-nav-bar fixed>
        <template #left>
          <img class="logo" src="@/assets/jrtt.png" alt />
        </template>
        <template #right>
          <!-- 坑: postcss只能翻译style里css样式代码, 标签内行内样式它无法转换px转rem, 所以需要自己手动计算 -->
          <!-- 1rem=37.5px  所以18px=0.48rem -->
          <!-- 重要，每个van-tab代表一个标签导航，中间夹着内容，对应的下属列表内容 -->
          <van-icon name="search" size="0.48rem" @click="toSearch"/>
        </template>
      </van-nav-bar>
    </div>
    <div class="main">
      <!-- 吸顶效果  sticky offset-top='1.266rem'-->
      <van-tabs v-model="channelid" sticky offset-top="1.226667rem" @change="Onclick" :lazy-render=false>
        <van-tab
          :title="channel.name"
          v-for="(channel) in channelsUserList"
          :key="channel.id"
          :name="channel.id"
        >
          <ArtList ref="xm" :channelid="channelid" ></ArtList>
        </van-tab>
      </van-tabs>
      <!-- 编辑频道图标+ -->
      <van-icon name="plus" size="0.37rem" class="moreChannels" @click="showPopup" />
      <!-- 频道管理的弹出层 -->
        <van-popup v-model="show">
          <van-nav-bar title="频道管理">
           <template #right>
          <van-icon name="cross" size="0.37rem"  @click="show=false"/>
          </template>
          </van-nav-bar>
          <!-- v-model实质就是 :value="xxx" @input="xxx" -->
          <!-- 为什么这里得到channelid后就能直接跳到对应的频道 -->
          <!-- 因为我们上面的van-tabs 是用channelid来做数据绑定的 刚开始默认是0，所以展示第一个频道，现在你把对应的channelid传过来了，
          那他就展示对应的频道了 -->
           <ChannelEdit  v-model="channelid"
           :channelsUserList="channelsUserList" :Unselect="Unselect"
           @AddChannels="getAddChannels"
           @DeleteChannels="getDeleteChannels"
           @closeshow='closeshow'
           ></ChannelEdit>
      </van-popup>
    </div>
  </div>
</template>

<script>
// 目标1: 获取不同的文章列表, 需要传递不同的频道ID
// 想法: 让van-tabs的v-model关联频道ID

// 目标2: 点击tab标签页@change触发, 重新发送请求, 拿到新的数据
// 问题: 每次切换tab拿到的数据都是新的
// 即使你用keep-alive也没用(防止组件被销毁, 而你的组件没有销毁, 是在点击切换数据)
// 解决: 外面现在用的是同一个数组切换数据(多个ArticleList用的是同一个数组, 换会影响别人)
// 文章列表数据, 请求, 数组, 分别放入到ArticleList内部(自己请求自己的数据)
// 外面只负责传入当前激活的频道ID
import ChannelEdit from '@/views/Home/components/ChannelEdit'
import { getUserChannelsAPI, getAllChannelsAPI, deleteArticleAPI, updateChannelsAPI } from '@/api'
import ArtList from './components/ArtList.vue'
export default {
  name: 'home',
  data () {
    return {
      channelid: 0, //  tab导航-激活频道ID 默认第一个，因为第一个的channel.id=0
      channelsUserList: [], // 用户选择的频道列表
      channelsAllList: [], // 所有频道列表
      show: false,
      channel_id: ''
    }
  },
  created () {
    this.getData()
    this.getAllChannels()
  },
  components: {
    ArtList,
    ChannelEdit
  },
  methods: {
    // 获取用户频道列表
    async getData () {
      try {
        const res = await getUserChannelsAPI()
        this.channelsUserList = res.data.data.channels
      } catch (error) {}
    },
    // 获取所有频道列表
    async getAllChannels () {
      const result = await getAllChannelsAPI()
      this.channelsAllList = result.data.data.channels
    },
    Onclick (name, title) {
      this.channelid = name
    },
    showPopup () {
      this.show = true
    },
    // 新增用户频道
    async getAddChannels (obj) {
      // 你会疑虑为什么你push完新增的用户频道，为什么未选的频道列表也会相应的减少，你别忘了你下面的Unselect计算属性，
      // 他可是计算格局全部频道跟用户频道来计算出用户未选的频道的哦
      this.channelsUserList.push(obj)
      // 问题: 为何只需要push, 不需要从下面数组里移除
      // 还要把最新的数组, 发送给后台
      // 数组里对象字段 -> 转换
      // 推荐频道不能传递-筛选出不是推荐频道剩下的频道对象(推荐频道是第一个频道，id=0)
      const newArr = this.channelsUserList.filter(item => item.id !== 0)
      //  this.attrInfo=JSON.parse(JSON.stringify(row));
      const newArr2 = JSON.parse(JSON.stringify(newArr))// 深拷贝，因为channelsUserList的数据是数组里面套对象 2层结构，用深拷贝
      newArr2.forEach((obj, index) => {
        // delete 对象.属性 可以删除键值对
        delete obj.name
        obj.seq = index
      })
      await updateChannelsAPI({
        channels: newArr2
      })

      // 上面的代码出问题, 新增时, 名字被删除了
      // 原因: 所有数组里的对象, 都是同一个内存地址, 影响到ChannelEdit.vue中对象
      // 解决方法
      // await updateChannelsAPI({
      //   channels: this.channelsUserList
      // })
    },
    // 删除用户频道
    async getDeleteChannels (obj, index) {
      this.channelsUserList.splice(index, 1)
      await deleteArticleAPI({
        target: obj.id
      })
    },
    // 关闭弹出层
    closeshow (show) {
      this.show = show
    },
    // 首页-右上角放大镜点击事件 -> 跳转搜索页面
    toSearch () {
      this.$router.push('/search')
    },
    // 监听网页滚动事件
    scrollFn () {
      this.$route.meta.scrollT = document.documentElement.scrollTop
      // 时实保存home组件滚动条的位置,并且把滚动的位置存进home路由的meta中
    }
  },
  computed: {
    // 计算用户未选的频道
    Unselect () {
      const unselectList = this.channelsAllList.filter((item) => {
        return this.channelsUserList.every(element => {
          return item.id !== element.id
        })
        // item.id !== element.id作为every函数的返回值
        // 因为item.id !== element.id是表达式嘛，表达式要么为true，要么为false
        // every的返回值为 item.id !== element.id
        // 当item.id !== element.id满足即为true的时候， 即every的返回值为true
        // filter的用法
        // arr.filter(()=>{
        //   return item.id !== element.id
        // })
        // 又因为item.id !== element.id是作为整个every的返回值
      })
      return unselectList
    }
  },
  activated () { // 当处于当前页面,或者切回页面的时候，触发监听器的scroll事件，调用scrollFn方法，
    // 把单前滚动条的位置时实保存到路由的meta中,然后立刻设置滚动条的位置
    window.addEventListener('scroll', this.scrollFn)
    // 立刻设置, 滚动条位置
    document.documentElement.scrollTop = this.$route.meta.scrollT
    document.body.scrollTop = this.$route.meta.scrollT
  },

  deactivated () { // 切走的时候就把监听器监听的scrollFn事件给移除掉
    window.removeEventListener('scroll', this.scrollFn)
  }
}
</script>

<style scoped lang='less'>
.logo {
  width: 80px;
  height: 30px;
}
.main {
  position: relative;
  padding-top: 44px;
  /* 底部的距离已经在Layout/index.vue 给二级路由挂载点容器上 给了一个padding-bottom */
  .moreChannels {
    position: fixed;
    right: 0px;
    top: 62px;
    z-index: 999;
    background-color: #fff;
    padding: 0 8px;
  }
  /deep/.van-popup {
    height: 100%;
    width: 100%;
    background-color: #fff;
  }
}
</style>
